<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>招聘会筛选 - 职场社交</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    body {
      background-color: #f8f9fa;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      padding-bottom: 70px;
    }
    
    /* 顶部导航 */
    .top-nav {
      background-color: white;
      padding: 12px 15px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.05);
      position: sticky;
      top: 0;
      z-index: 100;
    }
    
    .nav-title {
      font-size: 18px;
      font-weight: 600;
      text-align: center;
      margin: 0;
    }
    
    /* 搜索栏 */
    .search-container {
      padding: 12px 15px;
      background-color: white;
    }
    
    .search-box {
      position: relative;
    }
    
    .search-input {
      width: 100%;
      padding: 10px 15px 10px 40px;
      border-radius: 8px;
      border: 1px solid #eee;
      font-size: 14px;
      background-color: #f5f5f5;
    }
    
    .search-icon {
      position: absolute;
      left: 15px;
      top: 50%;
      transform: translateY(-50%);
      color: #999;
    }
    
    /* 高级筛选区 */
    .advanced-filter {
      background-color: white;
      border-top: 1px solid #eee;
      padding: 10px 15px;
    }
    
    .filter-row {
      display: flex;
      padding: 8px 0;
      border-bottom: 1px dashed #eee;
    }
    
    .filter-row:last-child {
      border-bottom: none;
    }
    
    .filter-label {
      width: 80px;
      font-size: 14px;
      color: #666;
      display: flex;
      align-items: center;
      flex-shrink: 0;
    }
    
    .filter-options {
      flex: 1;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    
    .filter-option {
      padding: 5px 12px;
      border-radius: 16px;
      font-size: 13px;
      background-color: #f5f5f5;
      color: #666;
      border: 1px solid transparent;
    }
    
    .filter-option.active {
      background-color: #e6f0ff;
      color: #0d6efd;
      border-color: #bed7ff;
    }
    
    /* 视图切换 */
    .view-controls {
      display: flex;
      justify-content: space-between;
      padding: 10px 15px;
      background-color: white;
      border-top: 1px solid #eee;
      align-items: center;
    }
    
    .view-label {
      font-size: 14px;
      color: #666;
    }
    
    .view-buttons {
      display: flex;
      gap: 10px;
    }
    
    .view-btn {
      width: 32px;
      height: 32px;
      border-radius: 6px;
      border: 1px solid #eee;
      background-color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #999;
    }
    
    .view-btn.active {
      background-color: #0d6efd;
      color: white;
      border-color: #0d6efd;
    }
    
    /* 列表视图样式 */
    .event-list {
      padding: 10px 15px 0;
    }
    
    .event-item {
      background-color: white;
      border-radius: 12px;
      overflow: hidden;
      margin-bottom: 12px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    
    /* 卡片视图样式 */
    .event-grid {
      padding: 10px 15px 0;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }
    
    .grid-item {
      background-color: white;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    
    /* 图片样式 */
    .event-images {
      display: flex;
      height: 120px;
    }
    
    .grid-images {
      height: 90px;
      position: relative;
    }
    
    .event-image {
      flex: 1;
      height: 100%;
      position: relative;
    }
    
    .event-image img, .grid-images img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .image-count {
      position: absolute;
      right: 8px;
      bottom: 8px;
      background-color: rgba(0,0,0,0.5);
      color: white;
      font-size: 12px;
      padding: 2px 6px;
      border-radius: 10px;
    }
    
    /* 无图样式 */
    .no-image {
      height: 80px;
      background-color: #f5f5f5;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #999;
    }
    
    .grid-no-image {
      height: 90px;
      background-color: #f5f5f5;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #999;
    }
    
    /* 信息样式 */
    .event-info {
      padding: 15px;
    }
    
    .grid-info {
      padding: 10px;
    }
    
    .event-title {
      font-size: 17px;
      font-weight: 600;
      color: #333;
      margin-bottom: 8px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    
    .grid-title {
      font-size: 14px;
      font-weight: 600;
      color: #333;
      margin-bottom: 5px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      line-height: 1.3;
    }
    
    .event-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      font-size: 13px;
      color: #666;
      margin-bottom: 10px;
    }
    
    .grid-meta {
      font-size: 11px;
      color: #888;
      margin-bottom: 5px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    
    .meta-item {
      display: flex;
      align-items: center;
      gap: 4px;
    }
    
    .event-tag {
      display: inline-block;
      padding: 3px 8px;
      background-color: #f0f7ff;
      color: #0d6efd;
      border-radius: 4px;
      font-size: 12px;
      margin-right: 5px;
      margin-bottom: 5px;
    }
    
    .grid-tag {
      display: inline-block;
      padding: 2px 5px;
      background-color: #f0f7ff;
      color: #0d6efd;
      border-radius: 3px;
      font-size: 10px;
      margin-right: 3px;
      margin-bottom: 3px;
    }
    
    .event-desc {
      font-size: 14px;
      color: #555;
      margin-top: 8px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      line-height: 1.5;
    }
    
    /* 底部操作区 */
    .event-actions {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 15px;
      border-top: 1px solid #eee;
      font-size: 14px;
    }
    
    .grid-actions {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 5px 10px 8px;
      font-size: 11px;
      color: #666;
    }
    
    .participants {
      display: flex;
      align-items: center;
      gap: 5px;
      color: #666;
    }
    
    .participant-avatars {
      display: flex;
    }
    
    .participant-avatar {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      object-fit: cover;
      border: 2px solid white;
      margin-left: -8px;
    }
    
    .participant-avatar:first-child {
      margin-left: 0;
    }
    
    .action-buttons {
      display: flex;
      gap: 10px;
    }
    
    .action-btn {
      padding: 5px 12px;
      border-radius: 20px;
      font-size: 13px;
      display: flex;
      align-items: center;
      gap: 5px;
    }
    
    .grid-action-btn {
      padding: 3px 8px;
      border-radius: 12px;
      font-size: 10px;
    }
    
    /* 底部导航 */
    .bottom-nav {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: white;
      border-top: 1px solid #eee;
      display: flex;
      padding: 8px 0;
      z-index: 100;
    }
    
    .nav-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #999;
      font-size: 10px;
      text-decoration: none;
    }
    
    .nav-item.active {
      color: #0d6efd;
    }
    
    .nav-icon {
      font-size: 20px;
      margin-bottom: 3px;
    }
    
    /* 加载更多 */
    .load-more {
      text-align: center;
      padding: 15px;
    }
    
    .load-more-btn {
      padding: 8px 20px;
      border-radius: 20px;
      font-size: 14px;
      background-color: white;
      border: 1px solid #eee;
      color: #666;
    }
    
    /* 空状态 */
    .empty-state {
      padding: 50px 20px;
      text-align: center;
      color: #999;
    }
    
    .empty-icon {
      font-size: 50px;
      margin-bottom: 15px;
      opacity: 0.5;
    }
    
    /* 日期标题 */
    .date-section {
      padding: 15px 15px 5px;
      font-size: 14px;
      color: #666;
      font-weight: 500;
    }
    
    /* 筛选器展开/收起 */
    .filter-toggle {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 8px 0;
      color: #0d6efd;
      font-size: 14px;
      background-color: white;
      border-top: 1px solid #eee;
    }
    
    .filter-toggle-icon {
      margin-left: 5px;
      transition: transform 0.3s;
    }
    
    .filter-toggle.expanded .filter-toggle-icon {
      transform: rotate(180deg);
    }
    
    /* 结果统计 */
    .result-stats {
      padding: 8px 15px;
      background-color: white;
      font-size: 13px;
      color: #666;
      border-top: 1px solid #eee;
    }
  </style>
</head>
<body>
  <!-- 顶部导航 -->
  <div class="top-nav d-flex justify-content-between align-items-center">
    <button class="btn btn-link p-0 text-dark">
      <i class="fa fa-arrow-left"></i>
    </button>
    <h1 class="nav-title">招聘会活动</h1>
    <button class="btn btn-link p-0 text-dark">
      <i class="fa fa-share-alt"></i>
    </button>
  </div>
  
  <!-- 搜索栏 -->
  <div class="search-container">
    <div class="search-box">
      <i class="fa fa-search search-icon"></i>
      <input type="text" class="search-input" placeholder="搜索招聘会、企业或职位">
    </div>
  </div>
  
  <!-- 筛选器展开/收起按钮 -->
  <div class="filter-toggle" id="filter-toggle">
    <span>高级筛选</span>
    <i class="fa fa-chevron-down filter-toggle-icon"></i>
  </div>
  
  <!-- 高级筛选区 -->
  <div class="advanced-filter" id="advanced-filter">
    <!-- 类型筛选 -->
    <div class="filter-row">
      <div class="filter-label">活动类型</div>
      <div class="filter-options">
        <div class="filter-option active">全部</div>
        <div class="filter-option">线下招聘会</div>
        <div class="filter-option">线上宣讲会</div>
        <div class="filter-option">双选会</div>
        <div class="filter-option">行业峰会</div>
      </div>
    </div>
    
    <!-- 时间筛选 -->
    <div class="filter-row">
      <div class="filter-label">举办时间</div>
      <div class="filter-options">
        <div class="filter-option active">全部</div>
        <div class="filter-option">今天</div>
        <div class="filter-option">明天</div>
        <div class="filter-option">本周</div>
        <div class="filter-option">下周</div>
        <div class="filter-option">本月</div>
      </div>
    </div>
    
    <!-- 地点筛选 -->
    <div class="filter-row">
      <div class="filter-label">举办地点</div>
      <div class="filter-options">
        <div class="filter-option active">全部</div>
        <div class="filter-option">北京市</div>
        <div class="filter-option">上海市</div>
        <div class="filter-option">广州市</div>
        <div class="filter-option">深圳市</div>
        <div class="filter-option">线上</div>
      </div>
    </div>
    
    <!-- 行业筛选 -->
    <div class="filter-row">
      <div class="filter-label">涉及行业</div>
      <div class="filter-options">
        <div class="filter-option active">全部</div>
        <div class="filter-option">互联网</div>
        <div class="filter-option">金融</div>
        <div class="filter-option">教育</div>
        <div class="filter-option">医疗</div>
        <div class="filter-option">制造业</div>
        <div class="filter-option">服务业</div>
      </div>
    </div>
    
    <!-- 面向人群筛选 -->
    <div class="filter-row">
      <div class="filter-label">面向人群</div>
      <div class="filter-options">
        <div class="filter-option active">全部</div>
        <div class="filter-option">应届生</div>
        <div class="filter-option">社会人才</div>
        <div class="filter-option">实习生</div>
        <div class="filter-option">高端人才</div>
      </div>
    </div>
    
    <!-- 企业规模筛选 -->
    <div class="filter-row">
      <div class="filter-label">企业规模</div>
      <div class="filter-options">
        <div class="filter-option active">全部</div>
        <div class="filter-option">50人以下</div>
        <div class="filter-option">50-200人</div>
        <div class="filter-option">200-500人</div>
        <div class="filter-option">500-1000人</div>
        <div class="filter-option">1000人以上</div>
      </div>
    </div>
  </div>
  
  <!-- 结果统计和视图切换 -->
  <div class="result-stats">找到 <span class="text-primary">28</span> 场符合条件的招聘会</div>
  
  <div class="view-controls">
    <div class="view-label">展示方式</div>
    <div class="view-buttons">
      <button class="view-btn active" id="list-view-btn" title="列表视图">
        <i class="fa fa-list"></i>
      </button>
      <button class="view-btn" id="grid-view-btn" title="网格视图">
        <i class="fa fa-th-large"></i>
      </button>
    </div>
  </div>
  
  <!-- 列表视图容器 -->
  <div id="list-view">
    <!-- 今日招聘会 -->
    <div class="date-section">今日</div>
    <div class="event-list">
      <!-- 多图样式招聘会 -->
      <div class="event-item">
        <div class="event-images">
          <div class="event-image">
            <img src="https://picsum.photos/300/200?random=1" alt="招聘会现场">
          </div>
          <div class="event-image">
            <img src="https://picsum.photos/300/200?random=2" alt="招聘会展位">
          </div>
          <div class="event-image">
            <img src="https://picsum.photos/300/200?random=3" alt="招聘会人流">
            <div class="image-count">+5</div>
          </div>
        </div>
        <div class="event-info">
          <h3 class="event-title">2023年秋季大型综合人才招聘会</h3>
          <div class="event-meta">
            <div class="meta-item"><i class="fa fa-map-marker"></i> 国际会展中心</div>
            <div class="meta-item"><i class="fa fa-calendar"></i> 今天 09:00-16:00</div>
            <div class="meta-item"><i class="fa fa-building-o"></i> 200+企业</div>
          </div>
          <div>
            <span class="event-tag">综合招聘</span>
            <span class="event-tag">全职</span>
            <span class="event-tag">应届生</span>
          </div>
          <p class="event-desc">
            本场招聘会涵盖互联网、金融、教育、医疗等多个行业，200+企业现场招聘，提供10000+就业岗位，求职者免费入场。
          </p>
        </div>
        <div class="event-actions">
          <div class="participants">
            <div class="participant-avatars">
              <img src="https://picsum.photos/100/100?random=10" class="participant-avatar" alt="参与者">
              <img src="https://picsum.photos/100/100?random=11" class="participant-avatar" alt="参与者">
              <img src="https://picsum.photos/100/100?random=12" class="participant-avatar" alt="参与者">
            </div>
            <span>1243人已报名</span>
          </div>
          <div class="action-buttons">
            <button class="btn btn-outline-primary action-btn">
              <i class="fa fa-calendar-plus-o"></i> 报名
            </button>
          </div>
        </div>
      </div>
      
      <!-- 单图样式招聘会 -->
      <div class="event-item">
        <div class="event-images">
          <div class="event-image" style="flex: 100%">
            <img src="https://picsum.photos/600/200?random=4" alt="互联网招聘会">
          </div>
        </div>
        <div class="event-info">
          <h3 class="event-title">2023互联网行业专场招聘会</h3>
          <div class="event-meta">
            <div class="meta-item"><i class="fa fa-map-marker"></i> 科技园区会议中心</div>
            <div class="meta-item"><i class="fa fa-calendar"></i> 今天 10:00-15:00</div>
            <div class="meta-item"><i class="fa fa-building-o"></i> 86家企业</div>
          </div>
          <div>
            <span class="event-tag">互联网</span>
            <span class="event-tag">技术岗</span>
            <span class="event-tag">高薪</span>
          </div>
          <p class="event-desc">
            汇聚行业头部企业，专注互联网技术、产品、运营等岗位招聘，现场可与企业技术负责人直接沟通。
          </p>
        </div>
        <div class="event-actions">
          <div class="participants">
            <div class="participant-avatars">
              <img src="https://picsum.photos/100/100?random=13" class="participant-avatar" alt="参与者">
              <img src="https://picsum.photos/100/100?random=14" class="participant-avatar" alt="参与者">
            </div>
            <span>586人已报名</span>
          </div>
          <div class="action-buttons">
            <button class="btn btn-outline-primary action-btn">
              <i class="fa fa-calendar-plus-o"></i> 报名
            </button>
          </div>
        </div>
      </div>
      
      <!-- 无图样式招聘会 -->
      <div class="event-item">
        <div class="no-image">
          <i class="fa fa-briefcase fa-2x"></i>
        </div>
        <div class="event-info">
          <h3 class="event-title">2023届高校毕业生线上双选会</h3>
          <div class="event-meta">
            <div class="meta-item"><i class="fa fa-laptop"></i> 线上直播</div>
            <div class="meta-item"><i class="fa fa-calendar"></i> 今天 09:00-21:00</div>
            <div class="meta-item"><i class="fa fa-building-o"></i> 152家企业</div>
          </div>
          <div>
            <span class="event-tag">线上</span>
            <span class="event-tag">应届生</span>
            <span class="event-tag">全国</span>
          </div>
          <p class="event-desc">
            面向2023届高校毕业生的线上双选会，提供视频面试、在线沟通等功能，足不出户即可与企业HR面对面交流。
          </p>
        </div>
        <div class="event-actions">
          <div class="participants">
            <div class="participant-avatars">
              <img src="https://picsum.photos/100/100?random=15" class="participant-avatar" alt="参与者">
              <img src="https://picsum.photos/100/100?random=16" class="participant-avatar" alt="参与者">
              <img src="https://picsum.photos/100/100?random=17" class="participant-avatar" alt="参与者">
              <img src="https://picsum.photos/100/100?random=18" class="participant-avatar" alt="参与者">
            </div>
            <span>2157人已报名</span>
          </div>
          <div class="action-buttons">
            <button class="btn btn-primary action-btn">
              <i class="fa fa-check"></i> 已报名
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 网格视图容器 -->
  <div id="grid-view" style="display: none;">
    <div class="event-grid">
      <!-- 网格项1 -->
      <div class="grid-item">
        <div class="grid-images">
          <img src="https://picsum.photos/300/200?random=1" alt="招聘会现场">
          <div class="image-count">+5</div>
        </div>
        <div class="grid-info">
          <h3 class="grid-title">2023年秋季大型综合人才招聘会</h3>
          <div class="grid-meta">
            <i class="fa fa-map-marker"></i> 国际会展中心<br>
            <i class="fa fa-calendar"></i> 今天 09:00-16:00
          </div>
          <div>
            <span class="grid-tag">综合招聘</span>
            <span class="grid-tag">应届生</span>
          </div>
        </div>
        <div class="grid-actions">
          <span>1243人报名</span>
          <button class="btn btn-outline-primary grid-action-btn">报名</button>
        </div>
      </div>
      
      <!-- 网格项2 -->
      <div class="grid-item">
        <div class="grid-images">
          <img src="https://picsum.photos/300/200?random=4" alt="互联网招聘会">
        </div>
        <div class="grid-info">
          <h3 class="grid-title">2023互联网行业专场招聘会</h3>
          <div class="grid-meta">
            <i class="fa fa-map-marker"></i> 科技园区<br>
            <i class="fa fa-calendar"></i> 今天 10:00-15:00
          </div>
          <div>
            <span class="grid-tag">互联网</span>
            <span class="grid-tag">技术岗</span>
          </div>
        </div>
        <div class="grid-actions">
          <span>586人报名</span>
          <button class="btn btn-outline-primary grid-action-btn">报名</button>
        </div>
      </div>
      
      <!-- 网格项3 -->
      <div class="grid-item">
        <div class="grid-no-image">
          <i class="fa fa-laptop fa-lg"></i>
        </div>
        <div class="grid-info">
          <h3 class="grid-title">2023届高校毕业生线上双选会</h3>
          <div class="grid-meta">
            <i class="fa fa-laptop"></i> 线上直播<br>
            <i class="fa fa-calendar"></i> 今天 09:00-21:00
          </div>
          <div>
            <span class="grid-tag">线上</span>
            <span class="grid-tag">应届生</span>
          </div>
        </div>
        <div class="grid-actions">
          <span>2157人报名</span>
          <button class="btn btn-primary grid-action-btn">已报</button>
        </div>
      </div>
      
      <!-- 网格项4 -->
      <div class="grid-item">
        <div class="grid-images">
          <img src="https://picsum.photos/300/200?random=5" alt="金融招聘会">
        </div>
        <div class="grid-info">
          <h3 class="grid-title">2023金融行业人才专场招聘会</h3>
          <div class="grid-meta">
            <i class="fa fa-map-marker"></i> 国际金融中心<br>
            <i class="fa fa-calendar"></i> 明天 09:30-15:30
          </div>
          <div>
            <span class="grid-tag">金融</span>
            <span class="grid-tag">高薪</span>
          </div>
        </div>
        <div class="grid-actions">
          <span>328人报名</span>
          <button class="btn btn-outline-primary grid-action-btn">报名</button>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 加载更多 -->
  <div class="load-more">
    <button class="load-more-btn">
      <i class="fa fa-refresh"></i> 加载更多
    </button>
  </div>
  
  <!-- 底部导航 -->
  <div class="bottom-nav">
    <a href="#" class="nav-item">
      <i class="fa fa-home nav-icon"></i>
      <span>首页</span>
    </a>
    <a href="#" class="nav-item active">
      <i class="fa fa-calendar nav-icon"></i>
      <span>招聘会</span>
    </a>
    <a href="#" class="nav-item">
      <i class="fa fa-briefcase nav-icon"></i>
      <span>职位</span>
    </a>
    <a href="#" class="nav-item">
      <i class="fa fa-user-o nav-icon"></i>
      <span>我的</span>
    </a>
  </div>

  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 筛选器展开/收起
    const filterToggle = document.getElementById('filter-toggle');
    const advancedFilter = document.getElementById('advanced-filter');
    
    filterToggle.addEventListener('click', function() {
      this.classList.toggle('expanded');
      if (this.classList.contains('expanded')) {
        advancedFilter.style.display = 'block';
      } else {
        advancedFilter.style.display = 'none';
      }
    });
    
    // 初始化隐藏高级筛选
    advancedFilter.style.display = 'none';
    
    // 筛选选项切换
    const filterOptions = document.querySelectorAll('.filter-option');
    filterOptions.forEach(option => {
      option.addEventListener('click', function() {
        // 找到同一行的其他选项并移除active类
        const siblings = this.parentElement.querySelectorAll('.filter-option');
        siblings.forEach(sib => sib.classList.remove('active'));
        
        // 为当前选项添加active类
        this.classList.add('active');
        
        // 更新结果统计（模拟）
        updateResultStats();
      });
    });
    
    // 视图切换
    const listViewBtn = document.getElementById('list-view-btn');
    const gridViewBtn = document.getElementById('grid-view-btn');
    const listView = document.getElementById('list-view');
    const gridView = document.getElementById('grid-view');
    
    listViewBtn.addEventListener('click', function() {
      listViewBtn.classList.add('active');
      gridViewBtn.classList.remove('active');
      listView.style.display = 'block';
      gridView.style.display = 'none';
    });
    
    gridViewBtn.addEventListener('click', function() {
      gridViewBtn.classList.add('active');
      listViewBtn.classList.remove('active');
      gridView.style.display = 'grid';
      listView.style.display = 'none';
    });
    
    // 报名按钮功能
    const registerButtons = document.querySelectorAll('.action-btn, .grid-action-btn');
    registerButtons.forEach(button => {
      button.addEventListener('click', function() {
        if (this.textContent.includes('报名')) {
          this.classList.remove('btn-outline-primary');
          this.classList.add('btn-primary');
          if (this.classList.contains('grid-action-btn')) {
            this.textContent = '已报';
          } else {
            this.innerHTML = '<i class="fa fa-check"></i> 已报名';
          }
          
          // 更新参与人数
          let participantsEl;
          if (this.classList.contains('grid-action-btn')) {
            participantsEl = this.closest('.grid-actions').querySelector('span');
          } else {
            participantsEl = this.closest('.event-actions').querySelector('.participants span');
          }
          
          const currentCount = parseInt(participantsEl.textContent);
          participantsEl.textContent = participantsEl.textContent.replace(currentCount, currentCount + 1);
          
          alert('报名成功！');
        } else {
          this.classList.remove('btn-primary');
          this.classList.add('btn-outline-primary');
          if (this.classList.contains('grid-action-btn')) {
            this.textContent = '报名';
          } else {
            this.innerHTML = '<i class="fa fa-calendar-plus-o"></i> 报名';
          }
          
          // 更新参与人数
          let participantsEl;
          if (this.classList.contains('grid-action-btn')) {
            participantsEl = this.closest('.grid-actions').querySelector('span');
          } else {
            participantsEl = this.closest('.event-actions').querySelector('.participants span');
          }
          
          const currentCount = parseInt(participantsEl.textContent);
          participantsEl.textContent = participantsEl.textContent.replace(currentCount, currentCount - 1);
          
          alert('已取消报名');
        }
      });
    });
    
    // 加载更多功能
    document.querySelector('.load-more-btn').addEventListener('click', function() {
      const btn = this;
      btn.innerHTML = '<i class="fa fa-spinner fa-spin"></i> 加载中...';
      
      // 模拟加载延迟
      setTimeout(() => {
        btn.innerHTML = '<i class="fa fa-refresh"></i> 加载更多';
        alert('已加载全部内容');
      }, 1500);
    });
    
    // 搜索功能
    const searchInput = document.querySelector('.search-input');
    searchInput.addEventListener('keydown', function(e) {
      if (e.key === 'Enter') {
        e.preventDefault();
        const searchText = this.value.trim();
        if (searchText) {
          alert(`搜索: ${searchText}`);
          // 模拟搜索结果更新
          updateResultStats();
        }
      }
    });
    
    // 更新结果统计（模拟）
    function updateResultStats() {
      const statsEl = document.querySelector('.result-stats .text-primary');
      // 生成1-50之间的随机数模拟筛选结果
      const randomCount = Math.floor(Math.random() * 50) + 1;
      statsEl.textContent = randomCount;
    }
  </script>
</body>
</html>
